<template>
	<view class="container">
		<view class="login-section">
			<view class="title">欢迎登录</view>
			<button class="login-btn" @click="handleLogin">微信一键登录</button>
		</view>
		
		<!-- 用户信息收集弹窗 -->
		<view class="popup" v-if="showUserInfoPopup" @click.stop>
			<view class="popup-content">
				<view class="popup-header">
					<text class="title">完善信息</text>
					<text class="close" @click="closePopup">×</text>
				</view>
				
				<view class="popup-body">
					<view class="form-item">
						<text class="label">姓名</text>
						<input 
							type="text"
							v-model="userInfo.nickname"
							placeholder="请输入您的姓名"
							class="input"
						/>
					</view>
					
					<view class="form-item">
						<text class="label">手机号码</text>
						<input 
							type="number"
							v-model="userInfo.phone"
							placeholder="请输入手机号码"
							class="input"
							maxlength="11"
						/>
					</view>
				</view>
				
				<view class="popup-footer">
					<button 
						class="confirm-btn" 
						:disabled="!userInfo.nickname || !userInfo.phone"
						@click="confirmUserInfo"
					>
						确认
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { config } from '@/utils/config.js'

// 用户信息收集弹窗控制
const showUserInfoPopup = ref(false)
const userInfo = ref({
	nickname: '',
	phone: '',
	token: '' // 存储登录返回的token
})

// 处理微信登录
const handleLogin = async () => {
	try {
		const loginRes = await uni.login()
		if (loginRes.code) {
			// 先调用登录接口
			const res = await uni.request({
				url: config.baseUrl + '/api/user/login',
				method: 'POST',
				data: {
					code: loginRes.code
				}
			})
			
			if (res.data.code === 200) {
				// 保存token
				userInfo.value.token = res.data.data.token
				
				// 获取用户信息
				const userInfoRes = await uni.request({
					url: config.baseUrl + '/api/user/info',
					method: 'GET',
					header: {
						'Authorization': `Bearer ${userInfo.value.token}`
					}
				})
				
				if (userInfoRes.data.code === 200) {
					const userData = userInfoRes.data.data
					
					// 检查用户信息是否完整
					if (!userData.name || !userData.phone) {
						showUserInfoPopup.value = true // 显示信息收集弹窗
					} else {
						// 信息完整，直接保存并返回
						saveLoginInfoAndReturn({
							...userData,
							token: userInfo.value.token
						})
					}
				} else {
					throw new Error(userInfoRes.data.message || '获取用户信息失败')
				}
			} else {
				throw new Error(res.data.message || '登录失败')
			}
		} else {
			throw new Error('微信登录失败')
		}
	} catch (error) {
		console.error('登录失败:', error)
		uni.showToast({
			title: error.message || '登录失败',
			icon: 'none'
		})
	}
}

// 关闭弹窗
const closePopup = () => {
	showUserInfoPopup.value = false
	userInfo.value = {
		nickname: '',
		phone: '',
		token: userInfo.value.token // 保持token不变
	}
}

// 确认用户信息
const confirmUserInfo = async () => {
	if (!userInfo.value.nickname || !userInfo.value.phone) {
		return uni.showToast({
			title: '请填写完整信息',
			icon: 'none'
		})
	}
	
	// 验证手机号格式
	if (!/^1[3-9]\d{9}$/.test(userInfo.value.phone)) {
		return uni.showToast({
			title: '请输入正确的手机号',
			icon: 'none'
		})
	}
	
	try {
		const res = await uni.request({
			url: config.baseUrl + '/api/user/info',
			method: 'PUT',
			header: {
				'Authorization': `Bearer ${userInfo.value.token}`
			},
			data: {
				name: userInfo.value.nickname,
				phone: userInfo.value.phone
			}
		})
		
		if (res.data.code === 200) {
			saveLoginInfoAndReturn({
				...res.data.data,
				token: userInfo.value.token
			})
		} else {
			throw new Error(res.data.message || '更新用户信息失败')
		}
	} catch (error) {
		console.error('更新用户信息失败:', error)
		uni.showToast({
			title: error.message || '更新用户信息失败',
			icon: 'none'
		})
	}
}

// 保存登录信息并返回
const saveLoginInfoAndReturn = (data) => {
	// 保存登录信息
	uni.setStorageSync('token', data.token)
	uni.setStorageSync('userRole', data.role)
	uni.setStorageSync('userInfo', {
		...data,
		nickname: data.name || userInfo.value.nickname,
		phone: data.phone || userInfo.value.phone
	})
	
	uni.showToast({
		title: '登录成功',
		icon: 'success',
		success: () => {
			setTimeout(() => {
				// 返回上一页
				uni.navigateBack()
			}, 1500)
		}
	})
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background: #f7f8fa;
	padding: 40rpx;
}

.login-section {
	margin-top: 200rpx;
	text-align: center;
	
	.title {
		font-size: 48rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 100rpx;
	}
	
	.login-btn {
		width: 100%;
		height: 88rpx;
		background: #07c160;
		color: #fff;
		font-size: 32rpx;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&:active {
			background: darken(#07c160, 5%);
		}
	}
}

.popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0,0,0,0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.popup-content {
		width: 80%;
		max-width: 600rpx;
		background: #fff;
		border-radius: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		
		.popup-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			
			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			
			.close {
				padding: 20rpx;
				font-size: 40rpx;
				color: #999;
				margin: -20rpx -20rpx 0 0;
				line-height: 1;
			}
		}
		
		.popup-body {
			.form-item {
				margin-bottom: 30rpx;
				
				.label {
					font-size: 28rpx;
					color: #333;
					margin-bottom: 16rpx;
					display: block;
				}
				
				.input {
					width: 100%;
					box-sizing: border-box;
					height: 80rpx;
					background: #f7f8fa;
					border-radius: 12rpx;
					padding: 0 24rpx;
					font-size: 28rpx;
					color: #333;
					line-height: 80rpx;
				}
			}
		}
		
		.popup-footer {
			margin-top: 40rpx;
			
			.confirm-btn {
				width: 100%;
				height: 88rpx;
				background: #07c160;
				color: #fff;
				font-size: 32rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				
				&:disabled {
					background: #ccc;
				}
				
				&:active:not(:disabled) {
					background: darken(#07c160, 5%);
				}
			}
		}
	}
}
</style> 